<mat-card *ngIf="hero" class="hero-edit-component">
    <mat-card-subtitle>Edit</mat-card-subtitle>

    <div class="alert" *ngIf="!synced">
        <h4>Warning:</h4>
        <p>Someone else has <b>changed</b> this document. If you click save, you will overwrite the changes.</p>
        <button mat-raised-button color="primary" (click)=resync()>resync</button>
    </div>

    <div class="alert deleted" *ngIf="(hero.deleted$ | async)">
        <h4>Error:</h4>
        <p>Someone else has <b>deleted</b> this document. You can not save anymore.</p>
    </div>

    <h5>
      <div class="color-box" [style.background-color]="hero.color"></div>
      {{hero.name}}
    </h5>


    <mat-form-field>
        HP: <input matInput type="number" [(ngModel)]="formValue" min="0" [max]="hero.maxHP" name="hp" />
    </mat-form-field>

    <br />
    <button mat-raised-button color="primary" (click)="cancel()">cancel</button>
    <button *ngIf="!(hero.deleted$ | async)" class="submitButton" mat-raised-button color="primary" (click)=submit()>submit</button>

</mat-card>
